// pages/detail-search/index.js
import { getSearchHot,getSearchSuggest,getSearchResult } from '../../service/api_search'
import debounce from '../../utils/debounce'
const debounceGetSearchSuggest=debounce(getSearchSuggest)
Page({

  /**
   * 页面的初始数据
   */
  data: { 
    id:0,
     hotKeyWords:[],
     suggestSongs:[],
     searchValue:'',
     suggestSongsNodes:[],
     resultSongs:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
     this.getpageData()
  },
  getpageData:function(){
    getSearchHot().then(res=>{
      this.setData({hotKeyWords:res.result.hots})
     
    })
  },
  // 事件处理
 
  handleSearchChange:function(event){
    // 拿到输入值
    const searchValue=event.detail
    // 存下
    this.setData({searchValue})
    // 如果输入为空 
    if(!searchValue.length) {
       this.setData({suggestSongs:[]})
       this.setData({resultSongs:[]})
       debounceGetSearchSuggest.cancel()
       return
    }
    // 根据关键字搜索
    debounceGetSearchSuggest(searchValue).then(res=>{
      // 获取建议的关键词歌曲
      const suggestSongs=res.result.allMatch
      this.setData({suggestSongs})
      if(!suggestSongs) return
      // 转成node节点展示
      const suggestKeywords=suggestSongs.map(item=>item.keyword)
      const suggestSongsNodes=[]
      for(const keyword of suggestKeywords){
        const nodes=[]
        // 以xxx关键字开头
        if(keyword.toUpperCase().startsWith(searchValue)){
          //  搜的前几个
              const key1=keyword.slice(0,searchValue.length)
              const node1={
                name:'span',
                attrs:{style:'color:#26ce8a;font-size:14px'},
                children:[{ type :'text',text:key1}]
              }
              nodes.push(node1)
             //  搜的前几个后面的字
             const key2=keyword.slice(searchValue.length) 
             const node2={
              name:'span',
              attrs:{style:'color:black'},
              children:[{ type :'text',text:key2}]
            }
            nodes.push(node2)
        }else{
          const node={
            name:'span',
            attrs:{style:'color:#000000'},
            children:[{ type :'text',text:keyword}]
          }
          nodes.push(node)
        }
        suggestSongsNodes.push(nodes)
      }
      this.setData({suggestSongsNodes})
    })
  },
  handleSearchAction:function(){
    const searchValue=this.data.searchValue

    getSearchResult(searchValue).then(res=>{
       this.setData({resultSongs:res.result.songs})
       
    })
  },
  handleSuggestItemClick:function(e){
    // console.log(e);
    // 获取点击的关键字
    const index=e.currentTarget.dataset.index
    const keyword=this.data.suggestSongs[index].keyword
    // 讲关键字设置到searchValue
    this.setData({searchValue:keyword})

    // 发请求
    getSearchResult(keyword).then(res=>{
      this.setData({resultSongs:res.result.songs})
      
   })

  },
  handleTagItemClick(e){

   const keyword=e.currentTarget.dataset.keyword
   this.setData({searchValue:keyword})
    // 发请求
    getSearchResult(keyword).then(res=>{
      this.setData({resultSongs:res.result.songs})
   })
  }


  
})